<template>
  <div class="container">
    <a-form-model :model="form" ref="form" v-bind="layout" :rules="rules" >
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="form.name" placeholder="名称" />
      </a-form-model-item>
      <a-form-model-item label="团支部书记" prop="secretary">
        <a-select allowClear v-model="form.secretary" placeholder="团支部书记">
          <a-select-option
            v-for="(item, index) in listData"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="团支部副书记" prop="viceSecretary">
        <a-select allowClear v-model="form.viceSecretary" placeholder="团支部副书记">
          <a-select-option
            v-for="(item, index) in listData"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="组织委员" prop="organization">
        <a-select allowClear v-model="form.organization" placeholder="组织委员">
          <a-select-option
            v-for="(item, index) in listData"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="宣传委员" prop="publicity">
        <a-select allowClear v-model="form.publicity" placeholder="宣传委员">
          <a-select-option
            v-for="(item, index) in listData"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
<!-- 
      <a-form-model-item label="发生时间" prop="birthday">
        <a-date-picker style="width:100%" v-model="form.happenTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD 00:00:00" placeholder="发生时间" />
      </a-form-model-item> -->
    </a-form-model>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  data() {
    return {
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 17 },
      },
      rules: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        secretary: [{required: true, message: '请输入团支部书记', trigger: 'change'}],
      },
      listData:[],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(){
     this.$ajax({
        url: this.$api.cadre.findList,
        data: {},
        success: (result) => {
          this.listData = result
        },
        fail: (err) => {
          this.$message.success(err);
        }
      });
    },
    save(e) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.upId = e
          this.$ajax({
            url: this.$api.organization.saveOrUpdate,
            data: this.form,
            success: (result) => {
              this.$message.success("操作成功");
              this.$emit('pass', null);
            },
            fail: (err) => {
              this.$message.success(err);
              this.$emit('reject', null);
            }
          });
        } else {
          this.$emit('reject', null);
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
    padding: 8px 108px!important;
  .header{
    height: 56px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding-left: 2.4rem;
  }
  .content{
    height: auto;
    padding: 3.2rem 13.2rem;
    border-top: .1rem solid rgba(0, 0, 0, 0.1);;
    border-bottom: .1rem solid rgba(0, 0, 0, 0.1);;
  }
  .footer{
    height: 64px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2.4rem;
    .ant-btn {
      margin-left: 1.6rem;
    }
  }
}
.ant-form-item-with-help {
    margin-bottom: 24px !important;
}
</style>
